<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Create beautiful slideshows with jQuery Cycle - Backslash</title>
    <link href="../static/css/lunbo/demo.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="../static/css/lunbo/slideshows.css"/>
</head>
<body>
<script src="../static/js/lunbo/jquery.js"></script>
    <script src="../static/js/lunbo/jquery.cycle.all.js"></script>
    <script src="../static/js/lunbo/jquery.easing.1.3.js"></script>
    <script>
        $(function () {
            $('#slideshow_1').cycle({
                fx: 'scrollHorz',
                easing: 'easeInOutCirc',
                speed: 700,
                timeout: 5000,
                pager: '.ss1_wrapper1 .slideshow_paging',
                prev: '.ss1_wrapper1 .slideshow_prev',
                next: '.ss1_wrapper1 .slideshow_next',
                before: function (currSlideElement, nextSlideElement) {
                    var data = $('.data', $(nextSlideElement)).html();
                    $('.ss1_wrapper1 .slideshow_box .data').fadeOut(300, function () {
                        $('.ss1_wrapper1 .slideshow_box .data').remove();
                        $('<div class="data">' + data + '</div>').hide().appendTo('.ss1_wrapper1 .slideshow_box').fadeIn(600);
                    });
                }
            });
           $('.ss1_wrapper1').mouseenter(function () {
                $('#slideshow_1').cycle('pause');
            }).mouseleave(function () {
                $('#slideshow_1').cycle('resume');
            });
        })
    </script>
        <div id="content1">
            <div class="ss1_wrapper1">
                <div class="slideshow_paging"></div>
                <div class="slideshow_box">
                    <div class="data"></div>
                </div>
                <div id="slideshow_1" class="slideshow">
                    <div class="slideshow_item">
                        <div class="image"><a href="#"><img src="../static/img/daocheng.jpg" alt="photo 2" width="100%"/></a>
                        </div>
                        <div class="data">
                            <p>Sed mollis tristique lectus vitae aliquet. </p>
                        </div>
                    </div>
                    <div class="slideshow_item">
                        <div class="image"><a href="#"><img src="../static/img/daocheng.jpg" alt="photo 3" width="100%"/></a>
                        </div>
                        <div class="data">
                            <p>Integer pretium volutpat ligula</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>